<template>
  <view>
    <view class="f_row_center" style="padding:30rpx 0">
      <view style="margin: 0 30rpx;">
        <image v-if="item.offid != null" :src="url" class="item_img" :lazy-load="true"/>
      </view>

      <view class="f_column flex_1">
        <view class="item_title text_overflow">{{ name }}</view>
        <view class="f_row_center">
          <image src="/static/address.png" style="min-width: 30rpx;height: 30rpx" />
          <div class="item_text text_overflow">{{ address }}</div>
        </view>
        <view style="margin-top: 12rpx" class="f_row_center">
          <image src="/static/level.png" style="width: 30rpx;height: 30rpx"/>
          <div class="item_text">{{ content }}</div>
        </view>
      </view>
      <image src="/static/arrow_right.png" style="height:30rpx;width:18rpx;margin: 0 30rpx"/>
    </view>
    <view class="h_line" style="margin: 0rpx 30rpx"/>
  </view>
</template>

<script lang="ts">
import {Vue, Component, Prop} from "vue-property-decorator";
import BaseApi from "@/api/BaseApi";

@Component({
  components: {}
})
export default class ItemHouseView extends Vue {
  testImg = BaseApi.instance().testImg
  @Prop() item: any;

  get name() {
    return this.item.offid == null ? (this.item.areaName ?? '') : (this.item.buildingname ?? '')
  }

  get address() {
    return this.item.offid == null ? (this.item.address ?? '') : (this.item.located ?? '')
  }

  get url(){
    return (this.item.tpList??[]).length>0?(this.item.tpList??[])[0].url:''
  }

  get content() {
    return this.item.offid == null ?
        ('用地面积:' + this.item.areaSize + "㎡  楼栋数:" + this.item.count) :
        (this.item.floornum + "层（地上" + this.item.dscount + "层 地下" + this.item.dxcount + "层）")
  }
}
</script>

<style scoped>
.item_img {
  height: 154rpx;
  width: 219rpx;
  border-radius: 10rpx;
  background: url("@/static/no_img.png") no-repeat;
  background-size: 100% 100%;
  background-color: rgba(69, 117, 242, 0.1);
}

</style>